<template>
  <div class="main-container">
    <div class="sidebar">
      <div class="user-info">
        <img :src="user.avatar" class="avatar" />
        <span class="username">{{ user.name }}</span>
      </div>
      <div class="contact-list">
        <div class="contact" v-for="contact in contacts" :key="contact.userId">
          <img :src="contact.avatar" class="avatar" />
          <span class="name">{{ contact.username }}</span>
        </div>
      </div>
    </div>
    <div class="chat-area">
      <div class="chat-header">
        <span class="chat-title">当前聊天</span>
      </div>
      <div class="messages">
        <div class="message" v-for="message in messages" :key="message.id">
          <div class="message-content">{{ message.content }}</div>
        </div>
      </div>
      <div class="input-area">
        <input v-model="newMessage" placeholder="输入消息..." />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.fetchFriendsList();
  },
  name: "MainPage",
  data() {
    return {
      user: {
        name: "用户名",
        avatar: "https://example.com/default-avatar.png",
      },
      contacts: [],
      messages: [
        { id: 1, content: "你好！" },
        { id: 2, content: "最近怎么样？" },
      ],
      newMessage: "",
    };
  },
  methods: {
    async fetchFriendsList() {
      try {
        const userString = localStorage.getItem("user");
        if (userString) {
          const user = JSON.parse(userString);
          const userId = user.id;
          console.log("userId" + userId);

          // 修改为POST请求，并发送userId作为请求参数
          const response = await this.$axios.post("/friends/list", {
            userId: userId,
          });

          if (response.code === 200) {
            this.contacts = response.data;
          }
        } else {
          console.error("未找到用户信息");
        }
      } catch (error) {
        console.error("获取好友列表失败:", error);
      }
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({
          id: Date.now(),
          content: this.newMessage,
        });
        this.newMessage = "";
      }
    },
  },
};
</script>

<style scoped>
.main-container {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  width: 280px;
  background-color: #2e2e2e;
  color: white;
  padding: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 10px;
}

.contact-list {
  overflow-y: auto;
}

.contact {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.contact:hover {
  background-color: #3a3a3a;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.chat-header {
  padding: 15px;
  border-bottom: 1px solid #d9d9d9;
  background-color: #ffffff;
}

.messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.message {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.message.received {
  align-items: flex-start;
}

.message.sent {
  align-items: flex-end;
}

.message-content {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 5px;
}

.message.received .message-content {
  background-color: #ffffff;
}

.message.sent .message-content {
  background-color: #07c160;
  color: white;
}

.input-area {
  display: flex;
  padding: 15px;
  border-top: 1px solid #d9d9d9;
  background-color: #ffffff;
}

.input-area input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.input-area button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
